<template>
  <div class="h-full flex flex-col justify-between pr-5">
    <div class="bg-white h-16 w-full leading-[64px] rounded-[6px] mb-6">
      <span @click="changeTabs(item.id)" :class="activeName === item.id ? 'tab-active-item' : 'tab-item'"
        v-for="item in postTypeList" :key="item.type">{{ item.name }}</span>
    </div>
    <div class="flex items-center justify-between mb-3">
      <div class="flex items-center">
        <div class="leading-[22px] mr-2">
          <span class="text-custom-text-65 mr-1">能力值</span>
          <span class="text-custom-blue">{{ capabilityValue }}</span>
        </div>
        <el-divider direction="vertical" />
        <div class="mr-2 ml-2">
          <span class="text-custom-text-65 mr-1">行业推荐能力值</span>
          <span class="text-custom-blue">{{ industryValue || '-' }}</span>
        </div>
        <el-divider direction="vertical" />
        <div class="ml-2">
          <span class="text-custom-text-65 mr-1">占比</span>
          <span class="text-custom-blue">{{ proportionValue }}%</span>
        </div>
      </div>
      <div>
        <el-date-picker class="mr-4" v-model="timeValue" type="month" placeholder="请选择" format="YYYY/MM"
          value-format="YYYY-MM" @change="changeTime" />
        <!--        <el-select v-model="inputValue" placeholder="请选择分类" style="width: 240px">-->
        <!--          <el-option-->
        <!--              v-for="item in options"-->
        <!--              :key="item.value"-->
        <!--              :label="item.label"-->
        <!--              :value="item.value"-->
        <!--          />-->
        <!--        </el-select>-->
      </div>
    </div>
    <div class="flex flex-col justify-between flex-1" style="height: calc(100% - 132px)">
      <div class="flex-1 mb-5" style="height: calc(100% - 100px)">
        <el-table :data="tableData" style="width: 100%" height="100%" row-class-name="row-class"
          header-row-class-name="header-row-class">
          <el-table-column label="序号" type="index" width="80" />
          <el-table-column property="name" label="考核名称">
            <template #default="{ row }">
              <span>{{ row.paper.name }}</span>
            </template>
          </el-table-column>
          <el-table-column property="pass_date" label="获取时间" />
          <el-table-column property="score" label="得分" />
        </el-table>
      </div>
      <div class="align-end mb-5">
        <el-pagination :current-page="paginationData.currentPage" :page-size="paginationData.pageSize"
          :page-sizes="[10, 30, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="paginationData.total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { userApi } from '@/api/index.js'
import { computed, onMounted, reactive, ref } from "vue";
import { TypeUtil, NumberUtil } from '@/utils/common.js'
const activeName = ref('')
const timeValue = ref('')
const tableData = ref([])
const postTypeList = ref([])
const capabilityValue = ref('')
const industryValue = ref('')
const proportionValue = ref('')
const paginationData = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})
const props = defineProps({
  previewData: {
    type: Boolean,
    required: false,
    default: null
  },
  isResumePublic: Boolean
});

onMounted(() => {
  getAbilityOptions()
})

//获取单个能力值
const getAbilityValue = () => {
  userApi.getAbilityValue({ job: activeName.value }).then(res => {
    capabilityValue.value = res
    const obj = postTypeList.value.find(i => i.id === activeName.value)
    industryValue.value = obj && obj.value
    proportionValue.value = NumberUtil.round(NumberUtil.divide(capabilityValue.value, industryValue.value) * 100, 0)
  })
}

//获取行业推荐能力值
const getAbilityOptions = () => {
  userApi.getAbilityOptions().then(data => {
    postTypeList.value = data || []
    activeName.value = postTypeList.value[0].id
    getAbilityValue()
    getPostListData()
  })
}

/**
* 获取考核列表
* */
const getPostListData = () => {
  const params = {
    job: activeName.value,
    month: timeValue.value,
    page: paginationData.currentPage,
    pageSize: paginationData.pageSize
  }
  userApi.getJobList(params).then(({ items, total }) => {
    tableData.value = items
    paginationData.total = total
  })
}

/**
* 选择日期后重新查询
* */
const changeTime = () => {
  paginationData.currentPage = 1;
  paginationData.pageSize = 10;
  getPostListData()
}

//切换岗位
const changeTabs = (type) => {
  activeName.value = type
  timeValue.value = ''
  getPostListData()
  getAbilityValue()
}
const handleSizeChange = (val) => {
  paginationData.pageSize = val;
  getPostListData()
}
const handleCurrentChange = (val) => {
  paginationData.currentPage = val;
  getPostListData()
}
</script>
<style scoped lang="scss">
:deep(.row-class) {
  .el-table__cell {
    padding: 20px 0;

    .cell {
      color: rgba(0, 0, 0, 0.88);
      font-weight: 500;
      line-height: 22px;
    }
  }
}

:deep(.header-row-class) {
  .el-table__cell {
    padding: 20px 0;
    background: #FBFBFB;

    .cell {
      color: rgba(0, 0, 0, 0.45);
      font-weight: 600;
      line-height: 22px;
    }
  }
}
</style>